<!doctype html>
<html lang="en">
{% load static %}
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 上述meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css"/>
    <link rel="stylesheet" href="{% static "css/toastr.min.css" %}"/>
    <link rel="stylesheet" href="{% static "css/sweetalert.css" %}"/>
    <link rel="SHORTCUT ICON" href="{% static "img/favicon.ico" %}"/>

    <title>总工程页面</title>
    <style type="text/css">
        #bg {
            background-image: url("{% static "img/bg.jpg" %}");
            background-repeat: repeat;
        }

        #ct {
            width: 100%;
            height: 100%;
            left: 370px;
            position: absolute;
        }

        #cc {
            margin-top: 100px;
        }

        img {
            opacity: 30%;
        }

        button {
            border-style: hidden;
        }
    </style>
</head>
<body id="bg">
{#<body style="background: #8c939d">#}
<!-- 以下三者的引用顺序是固定的 jQuery first, then Popper.js, then Bootstrap JS -->
<script src="{% static "js/jquery.js" %}"></script>
<script src="{% static "js/popper.js" %}"></script>
<script src="{% static "js/bootstrap.min.js" %}"></script>
<!-- sweetalert, toastr, snowflakes -->
<script src="{% static "js/sweetalert.js" %}"></script>
<script src="{% static "js/toastr.min.js" %}"></script>
<script src="{% static "js/snowflakes.js" %}"></script>
<div class="container" id="ct">
    <div id="cc" class="carousel slide" data-ride="carousel" data-interval=2000 data-pause="hover" data-wrap="true">
        <ol class="carousel-indicators">
            <li data-target="#cc" data-slide-to="0" class="active"></li>
            <li data-target="#cc" data-slide-to="1"></li>
            <li data-target="#cc" data-slide-to="2"></li>
            <li data-target="#cc" data-slide-to="3"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img id="m1" src="/static/img/p1.png" class="d-block w-100" alt="">
                <div class="carousel-caption d-none d-md-block" style="margin-bottom: 200px;">
                    <h1><span class="badge badge-secondary">开发测试工程</span></h1>
                    <h1><span class="badge badge-secondary">common</span></h1>
                    <div class="input-group mb-3" style="width: 200px;margin-left: 290px;">
                        <select class="custom-select" id="env-sel" style="font-weight: bold"
                                onchange="set_env(this.value)">
                            <option value="dev">开发</option>
                            <option value="test">测试</option>
                            <option value="prod">生产</option>
                        </select>
                        <button type="button" class="btn btn-primary btn-lg btn-block" onclick="to_log('p1')">
                            <i class="bi bi-cursor-fill"></i> GO
                        </button>
                    </div>
                    <p style="color: ghostwhite">
                        该工程用于开发调试。
                    </p>
                </div>
            </div>
            <div class="carousel-item">
                <img id="m1" src="/static/img/p2.png" class="d-block w-100" alt="">
                <div class="carousel-caption d-none d-md-block" style="margin-bottom: 200px;">
                    <h1><span class="badge badge-secondary">结构健康监测工程</span></h1>
                    <h1><span class="badge badge-secondary">structure-monitor</span></h1>
                    <div class="input-group mb-3" style="width: 200px;margin-left: 290px;">
                        <select class="custom-select" id="env-sel" style="font-weight: bold"
                                onchange="set_env(this.value)">
                            <option value="dev">开发</option>
                            <option value="test">测试</option>
                            <option value="prod">生产</option>
                        </select>
                        <button type="button" class="btn btn-primary btn-lg btn-block" onclick="to_log('p2')">
                            <i class="bi bi-cursor-fill"></i> GO
                        </button>
                    </div>
                    <p style="color: ghostwhite">
                        该工程内包含的项目有
                        <span class="badge badge-pill badge-warning">扶余</span>
                        等项目。
                    </p>
                </div>
            </div>
            <div class="carousel-item">
                <img id="m1" src="/static/img/p3.png" class="d-block w-100" alt="">
                <div class="carousel-caption d-none d-md-block" style="margin-bottom: 200px;">
                    <h1><span class="badge badge-secondary">厦门新体育中心</span></h1>
                    <h1><span class="badge badge-secondary">xiamen-stadium</span></h1>
                    <div class="input-group mb-3" style="width: 200px;margin-left: 290px;">
                        <select class="custom-select" id="env-sel" style="font-weight: bold"
                                onchange="set_env(this.value)">
                            <option value="dev">开发</option>
                            <option value="test">测试</option>
                            <option value="prod">生产</option>
                        </select>
                        <button type="button" class="btn btn-primary btn-lg btn-block" onclick="to_log('p3')">
                            <i class="bi bi-cursor-fill"></i> GO
                        </button>
                    </div>
                    <p style="color: ghostwhite">
                        该工程内包含的项目有
                        <span class="badge badge-pill badge-warning">厦门新体育中心</span>
                        等项目。
                    </p>
                </div>
            </div>
            <div class="carousel-item">
                <img id="m1" src="/static/img/p3.png" class="d-block w-100" alt="">
                <div class="carousel-caption d-none d-md-block" style="margin-bottom: 200px;">
                    <h1><span class="badge badge-secondary">重庆西部新区装配式建筑</span></h1>
                    <h1><span class="badge badge-secondary">fabricated-structure</span></h1>
                    <div class="input-group mb-3" style="width: 200px;margin-left: 290px;">
                        <select class="custom-select" id="env-sel" style="font-weight: bold"
                                onchange="set_env(this.value)">
                            <option value="dev">开发</option>
                            <option value="test">测试</option>
                            <option value="prod">生产</option>
                        </select>
                        <button type="button" class="btn btn-primary btn-lg btn-block" onclick="to_log('p4')">
                            <i class="bi bi-cursor-fill"></i> GO
                        </button>
                    </div>
                    <p style="color: ghostwhite">
                        该工程内包含的项目有
                        <span class="badge badge-pill badge-warning">重庆西部新区装配式建筑</span>
                        等项目。
                    </p>
                </div>
            </div>
            <div class="carousel-item">
                <img id="m1" src="/static/img/p0.png" class="d-block w-100" alt="">
                <div class="carousel-caption d-none d-md-block" style="margin-bottom: 200px;">
                    <h1><span class="badge badge-secondary">敬请期待新工程</span></h1>
                    <h1><span class="badge badge-secondary">unknown</span></h1>
                    <div class="input-group mb-3" style="width: 200px;margin-left: 290px;">
                        <select class="custom-select" id="env-sel" style="font-weight: bold"
                                onchange="set_env(this.value)">
                            <option value="dev">开发</option>
                            <option value="test">测试</option>
                            <option value="prod">生产</option>
                        </select>
                        <button type="button" class="btn btn-primary btn-lg btn-block" onclick="to_log('p0')">
                            <i class="bi bi-cursor-fill"></i> GO
                        </button>
                    </div>
                    <p style="color: ghostwhite">
                        ……
                    </p>
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" type="button" data-target="#cc" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" type="button" data-target="#cc" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

<script type="text/javascript">
    let env = 'dev';
    toastr.options = {
        closeButton: false,
        debug: false,
        progressBar: true,
        positionClass: "toast-top-center",
        onclick: null,
        showDuration: "300",
        hideDuration: "1000",
        timeOut: "2000",
        extendedTimeOut: "1000",
        showEasing: "swing",
        hideEasing: "linear",
        showMethod: "fadeIn",
        hideMethod: "fadeOut"
    };

    function loading(port) {
        swal({
            title: 'loading...',
            text: 'Please wait a moment!',
            type: 'warning',
            showCancelButton: false,
            showConfirmButton: false,
            timer: 2000,
        }, function () {
            if (port === '8001') {
                window.location.href = '/admin/'
            } else {
                window.location.href = 'http://192.168.18.13:'+ port + '/admin/'
            }
        });
    }

    // 判断是否不是数字
    function isNotNum(val) {
        if (val === "" || val == null) {
            return true;
        }
        return isNaN(val);
    }

    function set_up(project, force) {
        const httpRequest = new XMLHttpRequest();
            httpRequest.open('POST', '/chart/setup/', true);
            httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            httpRequest.send("project=" + project + "&env=" + env + "&force=" + force);
            httpRequest.onreadystatechange = function () {
                if (httpRequest.readyState === 4 && httpRequest.status === 200) {
                    const json = httpRequest.responseText;
                    const obj = JSON.parse(json);
                    const port = obj["port"];
                    const user = obj["user"];
                    console.log('main_project:', port);
                    console.log('login_user:', user);
                    if (port === 'false') {
                        toastr.warning('该项目暂未配置该环境！')
                    } else if (isNotNum(port)) {
                        force_switch(project, port, user)
                    } else {
                        loading(port)
                    }
                }
            };
    }

    function to_log(project) {
        if (project === 'p0') {
            toastr.info('敬请期待哈！')
        } else {
            console.log('main-project：' + project)
            console.log('env：' + env)
            set_up(project, 0)
        }
    }

    function set_env(env_sel) {
        env = env_sel;
    }

    function force_switch(project, env, user) {
        swal({
            title: '确认强制切换环境么？',
            text: '【' + user + '】正在使用【' + env + '】环境！',
            type: 'warning',
            showCancelButton: true,
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            closeOnConfirm: false,
            closeOnCancel: false
        }, function (isConfirm) {
            if (isConfirm) {
                set_up(project, 1)
                swal({
                    title: "关闭成功！",
                    timer: 1000,
                    type: "success"
                })
            } else {
                swal({
                    title: "取消关闭！",
                    timer: 1000,
                    type: "error"
                })
            }
        });
    }

</script>

<script type="text/javascript">
    const sf = new Snowflakes({
        color: "#ffffff",
        count: 75,
        minOpacity: 0.2,
        maxOpacity: 0.6
    });
</script>

</body>

</html>